<template>
    
    <div class="WaterfallFlow_item">
        <Waterfall :col="3" :data-source="list">
            <template #default="{ item }">
                <Card :item />
            </template>
        </Waterfall>
    </div>
</template>

<script setup>
import img_1 from "../../assets/images/local_img/img_1.png"
import img_2 from "../../assets/images/local_img/img_2.png"
import img_3 from "../../assets/images/local_img/img_3.png"
import img_4 from "../../assets/images/local_img/img_4.png"
import img_5 from "../../assets/images/local_img/img_5.png"
import img_6 from "../../assets/images/local_img/img_6.png"
import img_7 from "../../assets/images/local_img/img_7.png"
import img_8 from "../../assets/images/local_img/img_8.png"
import img_9 from "../../assets/images/local_img/img_9.png"
import img_10 from "../../assets/images/local_img/img_10.png"
// 定义接收的props
const props = defineProps({
    userData: {
        type: Object,
        required: true
    },
    config: {
        type: Object,
        default: () => ({})
    }
})


const list = ref([
    {
        imgurl: img_2,
        text: "档期活动物料",
        name: "作家sss"
    }, {
        imgurl: img_5,
        text: "图片2",
        name: "作家"
    }, {
        imgurl: img_7,
        text: "图片3",
        name: "作家"
    },  {
        imgurl: img_4,
        text: "图片3",
        name: "作家"
    }, {
        imgurl: img_8,
        text: "图片4",
        name: "作家"
    }, {
        imgurl: img_6,
        text: "图片2",
        name: "作家"
    },{
        imgurl: img_9,
        text: "图片3",
        name: "作家"
    },
    {
        imgurl: img_8,
        text: "图片4",
        name: "作家"
    }, {
        imgurl: img_10,
        text: "图片5",
        name: "作家"
    }, {
        imgurl: img_1,
        text: "图片5",
        name: "作家"
    }, {
        imgurl: img_2,
        text: "图片2",
        name: "作家"
    }, {
        imgurl: img_4,
        text: "图片3",
        name: "作家"
    }, {
        imgurl: img_8,
        text: "图片4",
        name: "作家"
    }, {
        imgurl: img_6,
        text: "图片2",
        name: "作家"
    }, {
        imgurl: img_9,
        text: "图片3",
        name: "作家"
    }, {
        imgurl: img_10,
        text: "图片5",
        name: "作家"
    },
    {
        imgurl: img_10,
        text: "图片4",
        name: "作家"
    },
    {
        imgurl: img_6,
        text: "图片2",
        name: "作家"
    },
    {
        imgurl: img_3,
        text: "图片5",
        name: "作家"
    },
    {
        imgurl: img_8,
        text: "图片4",
        name: "作家"
    },
])


// 使用props
console.log('收到的用户数据:', props.userData)
console.log('配置信息:', props.config)
</script>

<style lang="less" scoped>
.WaterfallFlow_item {
    margin: 60px 0px;
}

.masonry-container{
    padding: 0px;
}
</style>